<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>vues-demo</title>
    <style>
    .active{
      color: red;
    }
    </style>
  </head>
  <body>
    <div id="app">
      <input type="text" v-model="inputValue"/>
      <button v-on:click="btnClick">提交</button>
      <ul>
        <li v-for="item in list">{{item}}</li>
        <!-- v-model 数据双向绑定 -->
        <b>v-model 数据双向绑定</b><br/> 
        <li v-for="item in valueList">{{item}}</li>
      </ul>
      <!-- 全局组件 -->
      <b>全局组件·父组件向子组件传值</b><br/>
      <todo-item v-bind:content="item" v-for="item in valueList"></todo-item>
      <!-- 局部组件 -->
      <b>局部组件·父子组件传值</b><br/>
      <to-item v-bind:content="item" 
              :index="index"
              v-for="(item, index) in valueList"
               @delete="itemClicks"></to-item>
    </div>
    <div id="lifeCycle">
      <h3>{{message + "这是outerHTML中的,有template时会被占用"}}</h3>
    </div>

    <div id="com">
      <b>模板语法/计算属性/方法/监听</b><br>
      <p>{{c}}</p>
      <p v-text="c"></p>
      <p v-html="c"></p>
      <p v-bind:title="c">属性赋值</p>
    </div>
    <div id="computed">{{c}}</div>


    <div id="style">
      <div @click="beClick" 
      :class="{active:isActive}">Hello world</div>
      <div @click="beClicks" 
      :class="[isActives]">Hello world</div>
      <div :style="styleObj" 
      @click="beClickos">Hello world</div>
    </div>

    <div id="vif">
      <div v-if="show === 'a'">A</div>
      <div v-else-if="show === 'b'">B</div>
      <div v-else>O</div>
      <div v-show="show">show</div>
    </div>

    <div id="vlist">
      <template v-for="(item, index) of list">
        <div>
          {{item}}--{{index}}
        </div>
        <span>{{item}}</span>
      </template>
      <div v-for="(item, key, index) of obj">
        {{item}}-{{key}}-{{index}}
      </div>
    </div>
    <!-- built files will be auto injected -->
  </body>
</html>
